<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title></title>
	<link rel="icon" type="image/x-icon" href="../博雅/images/index/favicon.ico">
	<style type="text/css">
		*{
			margin: 0;
			padding: 0;
		}
		.clearFix::after{
			content: "";
			clear: both;
			display: block;
		}
		.header{
			text-align: center;
			width: 100%;
			height: 50px;
			background-color: rgb(25, 29, 58, 1.0);
			position: relative;
		}
		.title{
			text-align: center;
			width: 1000px;
			margin: 0 auto;
/*			position: absolute;
			left: 50%;
			margin-left: -600px;*/
		}
		.logo{
			margin-left:20px;
			margin-right: 20px;
			padding-top: 8px;
			float: left;
			vertical-align: middle;
		}
		.logo>a{
			width: 157px;
			height: 35px;
			background-image: url(../博雅/logo.png);
			background-size: 100%;
			display: block;

		}
		.header-list{
			margin-left: 20px;
			
			float: left;
		}
		.header-list>a{
			width: 70px;
			height: 50px;
			padding: 0 5px;
			text-align: center;
			line-height: 50px;
			color: #777;
			font-size: 14px;
			text-decoration: none;
			border-right: 1px solid #777;
			border-bottom: 0;
			border-top: 0;
			float: left;
		}
		.header-list>a:nth-of-type(1){
			border-left: 1px solid #777;
			color: white;
			background-color: rgb(47, 41, 71, 1.0);
		}
		.header-list>a:hover{
			color: white;
		}
		.join{
			margin-left: 20px;
			height: 50px;
			float: left;
		}
		.join>a{
			text-decoration: none;
			padding: 5px 10px;
			border-radius: 8px;
			color: white;
			text-align: center;
			line-height: 50px;
			background-color: rgb(56, 183, 116, 1.0);
		}
		.login{
			height: 50px;
			float: right;
		}
		.login>a{
			margin: 0 5px;
			line-height: 50px;
			text-align: center;
			color: green;
			text-decoration: none;
		}
		.login>a:nth-of-type(2){
			color: #777;
		}
		.login>a:nth-of-type(2):hover{
			color: white;
		}
		.only{
			width: 100%;
			height: 460px;
			background-image: url(../博雅/images/index/banner.jpg);
			background-size: cover;
		}
		.only-list{
			margin: 0 auto;
			width: 1000px;
			height: 350px;
			position: relative;
		}
		.only-item{
			position: absolute;
			right: 0px;
			bottom: 10px;
		}

		.download{
			display: inline-block;
			width: 20px;
			height: 17px;
			color: black;
			background-image: url(../博雅/images/index/download.png);
			background-position: 2px 0;
		}
		.only-item>h4{
			display: inline-block;
		}
		.only-box{
			margin: 5px;
			width: 310px;
			display: flex;
			align-items: center;
			background-color: rgb(255, 255, 255, .9);
		}
		.only-box:hover{
			background-color: rgb(255, 255, 255, 1.0)
		}
		.only-box>div{
			margin: 10px;
		}
		.only-one{
			width: 40px;
			height: 40px;
			background-image: url(../博雅/images/index/pad.png);
			background-position: 6px -199px;
		}
		.only-two{
			width: 40px;
			height: 40px;
			background-image: url(../博雅/images/index/pad.png);
			background-position: 6px 0px;
		}
		.only-three{
			width: 40px;
			height: 40px;
			background-image: url(../博雅/images/index/pad.png);
			background-position: 6px 533px;
		}
		.only-four{
			width: 80px;
			height: 80px;
			background-image: url(../博雅/images/index/dzandrond80.jpg);
			background-position: 0px 0px;
		}

		.online{
			width: 100px;
			height: 35px;
			text-align: center;
			line-height: 35px;
			background-color: white;
			position: absolute;
			right: 30px;
			bottom: 180px;
			z-index: 2;
			border-radius: 25px;
		}
		.online>span{
			width: 15px;
			height: 15px;
			background-image: url(../博雅/images/index/online.png);
			background-position: -87px -9px;
			position: absolute;
			top: 11px;
			right: -2;
			z-index: 4;
		}
		.online>div{
			width: 100px;
			height: 30px;
			background-image: url(../博雅/images/index/online.png);
			background-position: 0 -41px;
			overflow: hidden;
			display: none;
		}
		.online:hover{
			height: 70px;
			margin-bottom: -35px;
		}
		.online:hover>div{
			display: block;
		}
		.body{
			width: 1000px;
			margin: 50px auto;
			margin-top: px;
			padding-bottom:60px ;
			border-bottom: 1px solid #777;
			display: flex;
			text-align: center;
			justify-content: space-around;
			position: relative;

		}

		.body-list>img{
			width: 100%;
		}
		.body-list>a{
			font-size: 12px;
			text-decoration: none;
			color: #38B774;
			transition: all .5s;
		}

		.body-list{
			width: 217px;
			transition: all .5s;
		}
		.body-list:hover{
			color: white;
			background-color: #38B774;;
		}
		.body-list:hover a{
			color: white;
		}
		.body-list:hover .sj{
			border-left: 5px solid white;
		}
		.body-list:hover img{

		}
		.sj{
			width: 0;
			height: 0;
			display: inline-block;
			border: 5px solid transparent;
			border-left: 5px solid #38B774;
			transition: all .5s;
		}
		.square{
			width: 90px;
			height: 30px;
			background-color:#ffffff;
			position: absolute;
			left: 50%;
			margin-left: -45px;
			bottom: -15px;
		}
		.square>div{
			width: 10px;
			height: 10px;
			display: inline-block;
			margin: 0 5px;
			background-color: #B5C0CB;
			border-radius: 50%;
		}
		.news{
			width: 1000px;
			margin: 0 auto;
			display: flex;
		}
		.news-left{
			width: 500px;
		}
		.news-title{
			width: 500px;
			height: 120px;
			background-image: url(../博雅/images/index/bynewsbg.jpg);
			position: relative;

		}
		.moer{
			width: 66px;
			height: 28px;
			color: #38B774;
			border: 1px solid #38B774;
			border-radius: 8px;
			text-align: center;
			line-height: 28px;
			position: absolute;
			left: 50%;
			top: 20px;
		}
		.moer:hover{
			color: white;
			background-color: #38B774;
		}
		.news-list{
			width: 500px;
			height: 50px;
			border-bottom: 1px solid #EEE;
		}
		.news-list:hover a{
			color: #38B774;
		}
		.news-list>a{
			text-decoration: none;
			color: black;
			text-align: center;
			line-height: 50px;
			float: left;
			margin-left: 10px;
		}
		.news-list>span{
			margin-right: 10px;
			text-align: right;
			line-height: 50px;
			color: #eee;
			font-size: 13px;
			float: right;
		}
		.news-right{
			width: 500px;
			height: 310px;
			background-image: url(../博雅/images/index/byhrbg3.jpg);
			color: white;
			position: relative;
		}
		.news-right-title{
			position: absolute;
			left: 80px;
			top: 25px;
		}
		.news-right-title>p{
			text-align: center;
			font-size: 13px;
		}
		.news-right-title>span{
			border: 1px solid #fff;
			border-radius: 8px;
			padding: 5px 10px;
			position: absolute;
			right: -90px;
			top: 18px;
			transition: all .3s;
		}
		.news-right-title>span:hover{
			background-color: white;
			color: #38B774;
		}
		.news-right-body{
			margin-left: 10px;
			position: absolute;
			left: 0px;
			top: 120px;
			font-size: 14px;
		}
		.news-right-body>p{
			font-weight: bold;
		}
		.new-item{
			width: 300px;
			margin: 10px 0;
			padding-bottom:5px ;
			border-bottom: 1px solid white;
		}
		.footer-title{
			margin-bottom:20px ;
		}
		.footer{
			margin-top: 50px;
			width: 100%;
			height: 50px;
			background-color: black;
			color: #777;
			text-align: center;
			line-height: 50px;
			font-size: 14px;
		}
		.box{
			background-color: #191D3A;
		}
		.footer-body{
			width: 1000px;
			margin: 0 auto;
			background-color: #191D3A;
			text-align: left;
		}
		.footer-body>p{
			font-size: 12px;
			margin: -20px 0;
		}
		.footer img{
			width: 40px;
			height: 50px;
			vertical-align: middle;
		}
		#top{
			position: fixed;
			right: 50px;
			bottom: 100px;
			width: 69px;
			height: 32px;
			background-image: url(../博雅/images/index/top.png);
			background-position: 0 0;
		}
		#top:hover{
			background-image: url(../博雅/images/index/top.png);
			background-position: 0 32px;
		}
	</style>

</head>
<body>
	<a id="top" href="#"></a>
	<div class="header ">
		<div class="title clearFix">
			<h1 class="logo ">
				<a href="#"></a>
			</h1>
			<div class="header-list clearFix">
				<a href="">首页</a>
				<a href="./博雅游戏.html">博雅游戏</a>
				<a href="">博雅新闻</a>
				<a href="">关于我们</a>
				<a href="./52 博雅互动.html">客服中心</a>
				<a href="">投资者关系</a>
				<div class="join">
					<a href="">加入我们</a>
				</div>
			</div>
			<div class="login">
					<a href="">中文</a>
					<a href="">EN</a>
				</div>
		</div>
	</div>
	<div class="only">
		<div class="only-list">
			<div class="only-item">
				<div class="online">
					在线游戏
					<span></span>
					<div></div>
				</div>
				<p>风靡国内外的斗地主游戏，超低流量，玩法多样，居家旅行必备良品</p>
				<div class="download"></div>
				<h4>游戏：</h4>
				<div class="only-box">
					<div class="only-box-item">
						<div class="only-one"></div>
						<p>iPad</p>
					</div>
					<div class="only-box-item">
						<div class="only-two"></div>
						<p>iPhone</p>
					</div>
					<div class="only-box-item">
						<div class="only-three"></div>
						<p>Android</p>
					</div>
					<div class="only-box-item">
						<div class="only-four"></div>
					</div>
				</div>
			</div>
		</div>	
	</div>
	<div class="body">
		<div class="body-list">
			<img src="../博雅/images/index/gamepic10.jpg">
			<p>中国象棋</p>
			<a href="">CHINESE CHESS OF BOYAA&nbsp;&nbsp;<div class="sj"></div></a>
		</div>
		<div class="body-list">
			<img src="../博雅/images/index/byqpai2.jpg">
			<p>博雅棋牌</p>
			<a href="">BOYAA CHESS&nbsp;&nbsp;<div class="sj"></div></a>
		</div>
		<div class="body-list">
			<img src="../博雅/images/index/gamepic2.jpg">
			<p>四川麻将</p>
			<a href="">SICHUAN MAHJONG&nbsp;&nbsp;<div class="sj"></div></a>
		</div>
		<div class="body-list">
			<img src="../博雅/images/index/gamepic9.jpg">
			<p>四川棋牌</p>
			<a href="">BOYAA SZECHWAN GAME&nbsp;&nbsp;<div class="sj"></div></a>
		</div>
		<div class="square">
			<div></div>
			<div></div>
			<div></div>
		</div>
	</div>
	<div class="news">
		<div class="news-left">
			<div class="news-title">
				<div class="moer">MORE+</div>
			</div>
		
		<div class="news-body">
			<div class="news-list clearFix">
				<a href="">博雅互动2024年中期业绩</a>
				<span>8/27</span>
			</div>
			<div class="news-list clearFix">
				<a href="">博雅互动2024年第一季度业绩</a>
				<span>5/23</span>
			</div>
			<div class="news-list clearFix">
				<a href="">博雅互动2023年度业绩</a>
				<span>3/1</span>
			</div>
			<div class="news-list clearFix">
				<a href="">博雅互动2023年第三季度业绩</a>
				<span>11/23</span>
			</div>
		</div>
		</div>
		<div class="news-right">
			<div class="news-right-title">
				<h1 >社会招聘</h1>
				<p>BOYAA JOBS</p>
				<span>MORE+</span>
			</div>
			<div class="news-right-body">
				<p>社会招聘岗位：</p>
				<div class="new-item">
				React前端开发工程师
				</div>
				<div class="new-item">
				社交产品经理
				</div>
				<div class="new-item">
				运营设计师
				</div>
				<div class="new-item">
				海外游戏投放
				</div>
			</div>
		</div>
	</div>
	<div></div>
	<div class="footer">
		<div class="footer-title">
			《健康游戏忠告》： 抵制不良游戏 拒绝盗版游戏 注意自我保护 谨防受骗上当 适度游戏益脑 沉迷游戏伤身 合理安排时间 享受健康生活。
		</div>
		<div class="box">
			<div class="footer-body">
			<p>本网络游戏适合年满18周岁(含)以上的用户使用；为了您的健康，请合理控制游戏时间。</p>
			<p>《健康游戏忠告》 抵制不良游戏，拒绝盗版游戏。注意自我保护，谨防受骗上当。适度游戏益脑，沉迷游戏伤身。合理安排时间，享受健康生活。</p>
			<p>网站地图  |  免责声明  |  监督举报 | 《博雅游戏接入第三方SDK目录》|  博雅游戏服务协议 | 博雅隐私策略</p>
			<p>Copyright © 2004 - 2019 博雅互动(Boyaa Interactive)粤ICP备05062536号</p>
			<p>网络文化经营许可证：粤网文[2018]9499-3381号 | 互联网出版许可证：（署）网出证（粤）字第 030 号 | 增值电信业务经营许可证：粤B2-20110513 <img src="../博雅/images/index/govIcon.gif"></p>
		</div>
		</div>
		
	</div>

</body>
</html>